.node-card {
  width: 49%;
  height: 349px;
  margin: 0 0 24px;
  padding-top: 24px;
  border: 1px solid #e6eaef;

  &-header {
    display: flex;
    padding: 0 24px 0 24px;
    min-height: 42px;
    justify-content: space-between;
    align-items: center;
    background-repeat: no-repeat;
    background-position-x: 24px;
    &.master,
    &.single {
      padding: 0 24px 0 78px;
      background-image: url('../../../images/dispatch.svg');
    }
    &.storage {
      padding: 0 24px 0 78px;
      background-image: url('../../../images/storage.svg');
    }
    &.slave {
      height: unset;
      padding: 0 24px 0 78px;
      background-image: url('../../../images/engine.svg');
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  &-status {
    height: 24px;
    &.running {
      transform-origin: 50% 50%;
      animation: rotate 1.5s linear infinite;
    }
  }

  &-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 24px 24px 0;
    &-item {
      width: 46%;
      margin: 0 0 24px;
      &-title {
        display: flex;
        justify-content: space-between;
        .cpu.red,
        .memory.red,
        .disk.red {
          color: #ff0000;
        }
      }
      &-chart {
        height: 24px;
      }
    }
  }

  &-footer {
    position: relative;
    border-top: 1px solid #e6eaef;
    &-message {
      padding: 14px 72px 14px 24px;
      &-link {
        float: right;
        color: #0b6fd6;
        cursor: pointer;
      }
    }
    &-operate {
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
      height: 100%;
      text-align: center;
      padding-top: 12px;
      border-left: 1px solid #e6eaef;
      font-size: 18px;
    }
  }

  &.unactive {
    filter: grayscale(100%);
    filter: gray;
  }
}
